<template>
	<Row class="materialImg">
		<ICol span="20">
			<Row>
                <ICol span="4" v-if="$store.getters.per.wechat_manager_material_create">
				    <UploadPicSingle :uploadUrl="uploadUrl" :callback="uploadPicCallBack"></UploadPicSingle>
                </ICol>
                <ICol span="4" class="lh30">{{wechatImageGroupName}}</ICol>
                <ICol span="2" v-if="wechatImageGroupId>0">
                    <Tooltip v-if="$store.getters.per.wechat_manager_material_update"  content="重命名" placement="top">
                        <span v-on:click="editGroup"><Icon type="edit" size="18" class="lh25"></Icon></span>
                    </Tooltip>
                </ICol>
                <ICol span="2" v-if="wechatImageGroupId>0">
                    <Tooltip v-if="$store.getters.per.wechat_manager_material_delete"  content="删除" placement="top">
                        <span  v-on:click="delGroup"><Icon type="trash-a" size="18" class="lh25"></Icon></span>
                    </Tooltip>
                </ICol>
			</Row>
            <Row class="mt15" v-show="checkItem.length>0">
                <ICol span="2" class="lh30"><ICheckbox :indeterminate="indeterminate" @click.prevent.native="handleCheckAll" :value="checkAll">全选</ICheckbox><span></span></ICol>
                <ICol span="3" class="lh30">已选择{{checkItem.length}}项内容</ICol>
                <ICol span="2" class="lh30">
                    <Tooltip v-if="$store.getters.per.wechat_manager_material_delete" content="删除" placement="top">
                       <span v-on:click="del"><Icon type="trash-a" size="20"></Icon></span>
                    </Tooltip>
                </ICol>
                <ICol span="4">
                    <Select placeholder="移动图片至其他分组" @on-change="move">
                        <Option v-for="(group,index) in moveGroups"  :value="group.id" :key="group.id">{{group.name}}</Option>
                    </Select>
                </ICol>
            </Row>
			<Row class="mt15">
                <ICol span="24" v-if="images.length >0">
                    <ul>
                        <CheckboxGroup v-model="checkItem" @on-change="checkAllGroupChange">
                            <li v-for="(image,index) in images" :key="image.id" class="li" >
                                <ICheckbox size="large" :label="image.id" ></ICheckbox>
                                <div  class="img"><img :src="image.url"></div>
                                <IInput v-model="image.name" v-show="image.display" @on-blur="hideNameText(index)"></IInput>
                                <span class="name" v-on:click.stop="showNameText(index)">{{image.name}}</span>
                            </li>
                        </CheckboxGroup>
                    </ul>
                </ICol>
	            <ICol v-else span="24" style="text-align:center;line-height:150px;">
	                {{nodata}}
	            </ICol>
			</Row>
            <Row class="mt-25">
                <Page :total="total" @on-change="pageChange" :page-size="size"></Page>
            </Row>
		</ICol>
		<ICol span="4">
			<ImageGroup :callback="imageGroupCallBack" ref="imagegroup" :transfer="true"></ImageGroup>
		</ICol>
        <ImageGroupUpdate ref="imagegroupupdate" :transfer="true" :callback="imageGroupUpdateCallBack"></ImageGroupUpdate>
	</Row>
</template>

<script>
	import {Row,Col} from 'iview/src/components/grid'
	import Menu from 'iview/src/components/menu'
	import Icon from 'iview/src/components/icon'
	import IInput from 'iview/src/components/input'
    import ICheckbox from 'iview/src/components/checkbox'
    import Tooltip from 'iview/src/components/tooltip'
    import Page from 'iview/src/components/page'
    import { Select, Option, OptionGroup } from 'iview/src/components/select';

	import ImageGroup from 'admin/components/wechat/manager/material/image/group'
    import ImageGroupUpdate from 'admin/components/wechat/manager/material/image/group-update'
	import UploadPicSingle from 'admin/components/common/upload-pic-single'

	import Axios from 'admin/config/axios';

	export default {
		components:{
			Row,
            'ICol':Col,
            'IMenu':Menu,
            'IMenuItem':Menu.Item,
            Icon,
            Page,
            ImageGroup,
            ImageGroupUpdate,
            UploadPicSingle,
            IInput,
            ICheckbox,
            'CheckboxGroup': ICheckbox.Group,
            Tooltip,
            Select,
            Option,
        },
		data () {
			return {
                //上传图片地址
				uploadUrl : '',
                //图片分组ID
				wechatImageGroupId : -1,
                //图片分组名称
                wechatImageGroupName : '',
                //页码
				page: 1,
                //数量
                size : 20,
                //数据总量
                total : 0,
                //图片列表数据
                images : [],
                //移动分组数据
                moveGroups : [],
                //无数据
                nodata : '',
                //选中图片列表
                checkItem : [],
                //所有图片列国
                checkAllItem : [],
                indeterminate: false,
                checkAll : false,
			}
		},
		methods:{
			//获取文件列表
			getImages(){
                var param = {
                    page : this.page,
                    size : this.size,
                    wechat_image_group_id : this.wechatImageGroupId,
                }
        		Axios.Wechat.Manager.Material.Image.List(param)
                .then(res =>{
                    if(!res) return false;
                    var data= res.data;
                    this.total = data.total;
                    this.images = [];
                    if(!data.list){
                        this.nodata = '该分组暂时没有图片素材';
                        return false;
                    }
                    this.checkAllItem = [];
                    this.images = [];
                    for(var i in data.list){
                        data.list[i].display = false;
                        this.checkAllItem.push(data.list[i].id);
                    }
                    this.images = data.list;
                    this.page = 1;
                })
        	},
            //获取移动分组数据
            getMoveGroup(){
                Axios.Wechat.Manager.Material.ImageGroup.AllSingle()
                .then(res =>{
                    if(!res) return false;
                    var data = res.data;
                    this.moveGroups = [];
                    for(var i in data){
                        this.moveGroups.push({id:data[i]['id'],name:data[i]['name']});
                    }
                })
            },
        	//显示文件名文本框
        	showNameText(index){
                if(this.$store.getters.per.wechat_manager_material_update){
                    this.images[index].display = true;
                }
        	},
        	//隐藏文件名文本框,并保存
        	hideNameText(index){
        		var name =  this.images[index].name,
        			id = this.images[index].id;
                if(name==''){
                    this.$Message.error('更新失败,文件名不能为空');return false;
                }
                this.images[index].display = false;
        		Axios.Wechat.Manager.Material.Image.Update({name:name,id:id})
                .then(res =>{
                    if(!res) return false;
                   	this.images[index].name = name;
                })
        	},
        	//获取文件分组
			getGroup(){
				this.$refs.imagegroup.getGroups();
			},
            //图片分组回调
			imageGroupCallBack(id){
                this.checkItem = [];
				this.wechatImageGroupId = id;
                this.getImages();
                var groups = this.$refs.imagegroup.groups;
                for(var i in groups){
                    if(groups[i]['id']==id){
                        this.wechatImageGroupName = groups[i]['name']; 
                    }
                }
			},
            //上传图片回调
			uploadPicCallBack(){
				this.getGroup();
                this.getImages();
			},
            //编辑图片分组回调
            imageGroupUpdateCallBack(){
                this.uploadPicCallBack();
                this.wechatImageGroupName = this.$refs.imagegroupupdate.form.name;
            },
            //删除分组
            delGroup(){
                this.$Modal.confirm({
                    title: '删除',
                    content: '仅删除分组，不删除图片，组内图片将自动归入未分组?',
                    onOk: () => {
                        Axios.Wechat.Manager.Material.ImageGroup.Del(this.wechatImageGroupId)
                        .then(res =>{
                            if(!res) return false;
                            //分组数据重置
                            this.$refs.imagegroup.reset();
                            this.wechatImageGroupId = -1;
                            this.wechatImageGroupName = '',
                            this.getImages();
                            this.getGroup();
                        })
                    },
                });
            },
            //删除图片
            del(){
                this.$Modal.confirm({
                    title: '删除',
                    content: '你确定要删除选中的图片吗?',
                    onOk: () => {
                        Axios.Wechat.Manager.Material.Image.Del({wechat_image_ids:this.checkItem})
                        .then(res =>{
                            if(!res) return false;
                            this.getImages();
                            this.getGroup();
                            this.checkItem = [];
                        })
                    },
                });
            },
            //移动图片至另一个分组
            move(id){
                Axios.Wechat.Manager.Material.Image.Move({wechat_image_ids:this.checkItem,wechat_image_group_id:id})
                    .then(res =>{
                        if(!res) return false;
                        this.getGroup();
                        this.getImages();
                        this.checkItem = [];
                    })
            },
            //编辑分组
            editGroup(){
                this.$refs.imagegroupupdate.form.id = this.wechatImageGroupId;
                this.$refs.imagegroupupdate.form.name = this.wechatImageGroupName;
                this.$refs.imagegroupupdate.modal = true;
            },
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    this.checkItem = this.checkAllItem;
                } else {
                    this.checkItem = [];
                }
            },
            checkAllGroupChange (data) {
                if (data.length === this.checkAllItem.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            },
            init(){
                this.uploadUrl = '/wechat/manager/material/image/update?wechat_image_group_id='+this.wechatImageGroupId;
                this.getImages();
                this.getMoveGroup();
                this.getGroup();
            },
            pageChange(page){
                this.page = page;
                this.getImages();
            }
		},
        watch:{
            wechatImageGroupId :function(vue){
                this.uploadUrl = '/wechat/manager/material/image/update?wechat_image_group_id='+this.wechatImageGroupId;
            }
        }
		
	}
</script>
<style>
    .mt15{margin-top: 15px}
    .lh25{line-height: 25px;}
    .lh30{line-height: 30px;}
    .materialImg ul{margin-top: 15px;}
    .materialImg .ivu-icon{cursor: pointer;}
    .materialImg .li{float: left;margin-bottom: 10px;margin-right: 20px;width: 125px; height: 165px; overflow: hidden;text-overflow:ellipsis; white-space: nowrap;border:1px solid #dddee1;}
	.materialImg .img{width:125px; height: 132px; overflow: hidden;  position: relative;cursor:pointer;}
	.materialImg .img img{position: absolute; left: 50%; top: 50%; height: 169px; transform: translate(-50%,-50%);}
    .materialImg .name{display: block; overflow: hidden; width: 100%; line-height: 32px; padding: 0 9px; text-overflow: ellipsis; white-space: nowrap;cursor: pointer;}
	.materialImg .page{text-align:right;margin-top:15px;margin-right: 30px;}
    .materialImg .mask{position: absolute;margin-top: 0; margin-left: 0; z-index: 1;cursor: pointer;}
    .materialImg .mask .selected_mask_inner{width: 123px; height: 132px; -moz-opacity: .6; -khtml-opacity: .6; opacity: .6; background-color: #000; filter: alpha(opacity=60);}
    .materialImg .mask .check{color: #f8f8f9; top: 0; left: 0; text-align: center; width: 130px; height: 132px; line-height: 132px; display: inline-block; background-position: 50% 50%; position: absolute; z-index: 1; font-size: 47px;}
    .materialImg .ivu-checkbox-wrapper{position: absolute; z-index: 2; margin-left: 5px; margin-top: 5px;}
    .materialImg .ivu-checkbox-wrapper span:nth-child(2){display: none;}
</style>